<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>地震局培训平台</title>
		<!--<link rel="stylesheet" href="bootstrap/css/bootstrap.css" />-->
		<link rel="stylesheet" href="style/main.css" />
		<link rel="stylesheet" href="style/page.css" />
		<link rel="stylesheet" href="style/team.css" />
	</head>

	<body>
		<div id="info">
			<div class="info">
				<div class="newsbox">
					<!--消息滚动-->
					<div class="news nowrap">消息：欢迎加入地震应急志愿者培训平台，您是第123456位访问用户。</div>
				</div>
				<div class="infobox">
					<div class="name nowrap">zhangming</div>
					<div class="info_id nowrap">N.8784547</div>
					<div class="sign_out">退出</div>
				</div>
				<div class="leave_m">互动留言</div>
			</div>
		</div>
		<div id="show">
			<nav id="nav">
				<div class="top">
					<div class="logo"></div>
					<div class="seachbox">
						<input type="text" id="search" value="在线课堂搜索" />
						<div class="weibo codeIcon">
							<div class="first">
								<img src="image/weiboCode.png" />
							</div>
						</div>
						<div class="weixin codeIcon">
							<div class="first">
								<img src="image/weixinCode.png" />
							</div>
						</div>
					</div>
				</div>
				<div class="border">
					<ul class="nav">
						<li data-url="index">首页</li>
						<li data-url="news">新闻资讯</li>
						<!--<li data-url="story">志愿故事</li>-->
						<li class="in" class="team">志愿品牌
							<div class="first">
								<div data-url="story">志愿故事</div>
								<div data-url="team">志愿团体</div>
								<div data-url="star">志愿之星</div>
							</div>
						</li>
						<!--<li data-url="project">志愿项目</li>
						<li data-url="star">志愿之星</li>-->
						<li data-url="train">培训平台</li>
						<li data-url="policy">志愿政策</li>
					</ul>
				</div>
			</nav>
			<div id="content">
				<div class="top">
					<div class="border"></div>
					<div class="regionbox box">
						<div class="title">项目区域：</div>
						<div class="content" id="regionbox">
							<span class="in">全部</span>
							
						</div>
					</div>
					<div class="categorybox box">
						<div class="title">服务类别：</div>
						<div class="content" id="categorybox">
							<span class="in">全部</span>
						</div>
					</div>
					<div class="typebox box">
						<div class="title">团体类型：</div>
						<div class="content" id="typebox">
							<span class="in">全部</span>
						</div>
					</div>
					<div class="box">
						<div class="title">团体人数：</div>
						<div class="content">
							<span class="in">全部</span>
							<span>0-100</span>
							<span>101-200</span>
							<span>201-300</span>
							<span>301-400</span>
							<span>401-500</span>
							<span>501-600</span>
							<span>601-700</span>
							<span>701-800</span>
							<span>801-1000</span>
							<span>1000以上</span>
						</div>
					</div>
				</div>
				<div class="middle">
					<div class="timebox box">
						<div class="text">团体登记日期</div>
						<input type="text" class="text2 teamStart "  value="2018-04-29" />
						<div class="text">至</div>
						<input type="text" class="text2 teamEnd" value="2018-05-29" />
					</div>
					<div class="box">
						<div class="text">团体ID</div>
						<input type="text" class="text2 teamId"/>
					</div>
					<div class="box">
						<div class="text">团体名称</div>
						<input type="text" class="text2 teamTitle"/>
					</div>
					<div class="searchbtn"></div>
				</div>
				<div class="bottom">
					<div class="teambox">
						<!-- <div class="box">
							<div class="img"></div>
							<div class="t_title">靖安建设志愿服务队</div>
							<div class="num">团体人数：<span>20</span></div>
							<div class="time">成立日期：<span>2018-07-30</span></div>
							<div class="address">团体地址：<span>昌平区</span></div>
						</div> -->
						
					
					</div>
					<!--分页页码-->
					<div id="paging">
						<!-- <div class="first disable">第一页</div>
						<div class="prev disable">上一页</div> -->
						<ul class="list">
							<!--<li index="#1" class="cur">1</li>
							<li index="#2" class="">2</li>
							<li index="#3" class="">3</li>
							<li index="#4" class="">4</li>
							<li index="#5" class="">5</li>-->
						</ul>
						<!--<div class="go">
							<input type="text" placeholder="Goto">
							<button>GO</button>
						</div>-->
						<!-- <div class="next">下一页</div>
						<div class="last">最后一页</div> -->
					</div>
					<!-- <div class="pagebox">
						<div class="pageborder"></div>
						<div class="numbox">
							<div class="page">1</div>
							<div class="page in">2</div>
							<div class="page">3</div>
						</div>
					</div> -->
				</div>
			</div>
		</div>
		<div id="bottom">
			<ul class="border">
				<li>相关协作单位：</li>
				<li>中国红十字会</li>
				<li>中科院心理所</li>
				<li>中国地震信息网</li>
				<li>中国地震科普网</li>
				<li>北京市地震局科普网 </li>
				<li>科普网</li>
			</ul>
			<div class="bottom">
				<ul class="one">
					<li>设为首页</li>
					<li>交换链接</li>
					<li>关于我们</li>
					<li>联系我们</li>
					<li>常见问题</li>
					<li>心理教室</li>
					<li>党团建设</li>
				</ul>
				<ul class="two">
					<li>主办：北京市地震局</li>
					<li>版权所有 京ICP备08988239</li>
					<li>技术支持：中宣助力传媒</li>
				</ul>
			</div>
		</div>
		<script type="text/javascript" src="script/jquery.min.js"></script>
		<script type="text/javascript" src="script/ishoock.tools.js"></script>
		<script type="text/javascript" src="script/main.js"></script>
		<script type="text/javascript" src="script/paging.js"></script>
		<script type="text/javascript" src="script/common.js"></script>
		<script type="text/javascript" src="script/team.js"></script>
		<script>
			$(function() {
//				$("ul li").on("mouseover", function() {
//					$(this).in();
//				});
//				$("ul li").on("mouseleave", function() {
//					$("ul li").removeIn();
//				});
				
				$("#content .top span").on("click", function() {
					$(this).parent(".content").children().removeIn();
					$(this).in();
				});
				$(".bottom .img").on("mouseover", function() {
					$(this).in();
				});
				$(".bottom .img").on("mouseleave", function() {
					$(".bottom .img").removeIn();
				});
				
				
			})
		</script>
	</body>

</html>